import React, {Component} from 'react';
import ReactDOM from "react-dom";
import {Modal, Button, Icon} from "antd";
import {messages} from "share/common";
import Condition from "components/condition";
import "styles/financial-management/new-finance-audit/components/modal-delete-confirm.scss"

const { If } = Condition;

class ModalDeleteConfirm extends Component {

  handleReject = needRemove => {
    this.props.onClose();
    this.props.onOk(needRemove);
  };

  handleClose = () => {
    this.props.onClose();
    this.props.afterClose();
  };

  renderFooter = () => {
    const { info } = this.props;
    let footer = [
      <Button onClick={this.handleClose}>{messages('common.cancel')/*取消*/}</Button>,
      <Button type="primary" onClick={() => this.handleReject(false)}>{messages('common.reject')/*驳回*/}</Button>
    ];
    info.expenseReportBagCode && footer.push(
      <Button type="primary" onClick={() => this.handleReject(true)}>{messages('expense-14.key498')/*驳回并移除*/}</Button>
    )
    return footer;
  };

  render() {
    const { visible, info } = this.props;
    return (
      <Modal
        visible={visible}
        className="modal-delete-confirm"
        closable={false}
        width={440}
        footer={this.renderFooter()}
      >
        <div className="ant-confirm-body">
          <Icon type="question-circle" className="modal-delete-confirm-icon"/>
          <span className="ant-confirm-title">{messages('expense-14.key9')/*驳回所有费用将直接驳回报销单，你确定驳回吗？*/}</span>
          <If value={info.expenseReportBagCode}>
            <div className="ant-confirm-content">
              {messages('expense-14.key499')/*驳回：驳回报销单，报销单和发票袋仍然关联*/} <br/>
              {messages('expense-14.key500')/*驳回并移除：驳回报销单，并且把报销单和本发票袋取消关联*/}
            </div>
          </If>
        </div>
      </Modal>
    );
  }
}

ModalDeleteConfirm.open = function (config = {}, env) {
  let defaultConfig = {
    visible: false,
    onClose: close
  };
  let targetConfig = Object.assign(
    {},
    defaultConfig,
    config,
  );
  let div = document.createElement('div');
  let container = document.body;
  container.appendChild(div);
  function render(props) {
    if (env) {
      ReactDOM.unstable_renderSubtreeIntoContainer(env, <ModalDeleteConfirm {...props}/>, div, null)
    } else {
      ReactDOM.render(<ModalDeleteConfirm {...props}/>, div)
    }
  }
  function close() {
    if (div) {
      ReactDOM.unmountComponentAtNode(div);
      container.removeChild(div);
      div = null;
    }
  }
  render(targetConfig);
};

export default ModalDeleteConfirm;
